<script setup lang="ts">
import { computed } from 'vue'
import { formatSize, formatTime } from '@/utils/commonutils.ts'
import { DownloadInfoType, DownloadStatus } from '@/type/typedefine.ts'
import { pauseDownloadTask, resumeDownloadTask } from '@/api/torrent.ts'

const props = defineProps({
  downloadInfo: {
    type: Object as () => DownloadInfoType,
    required: true,
  },
})

const downloadText = computed(() => {
  switch (props.downloadInfo?.status) {
    case DownloadStatus.FINISHED:
      return '已完成'
    case DownloadStatus.PAUSED_DL:
      return '已暂停'
    case DownloadStatus.DOWNLOADING:
    case DownloadStatus.FORCED_DL:
      return '下载中'
    case DownloadStatus.CHECKING_DL:
      return '校验中'
    case DownloadStatus.CHECKING_RESUME_DATA:
      return '校验恢复数据'
    case DownloadStatus.QUEUED_DL:
      return '等待下载'
    case DownloadStatus.STALLED_DL:
      return '准备下载'
    default:
      return '未知状态'
  }
})

const isDownloading = computed(() => {
  return props.downloadInfo?.status == DownloadStatus.DOWNLOADING
})

const isPaused = computed(() => {
  return props.downloadInfo?.status === DownloadStatus.PAUSED_DL
})

const isFinished = computed(() => {
  return props.downloadInfo?.status === DownloadStatus.FINISHED
})

const downloadRateStr = computed(() => {
  return formatSize(props.downloadInfo?.downloadSpeed) + '/s'
})

const fileSizeStr = computed(() => {
  return formatSize(props.downloadInfo?.totalSize)
})

const estTimeStr = computed(() => {
  return formatTime(props.downloadInfo?.estimatedTime)
})

const progress = computed(() => {
  return (
    (Number(props.downloadInfo?.downloadedSize) /
      Number(props.downloadInfo?.totalSize)) *
    100
  )
})

function handleResume() {
  resumeDownloadTask(props.downloadInfo?.hash)
}

function handlePause() {
  pauseDownloadTask(props.downloadInfo?.hash)
}

function handleDelete() {
  //todo
}
</script>

<template>
  <v-hover>
    <template v-slot:default="{ isHovering, props }">
      <v-card
        :elevation="isHovering ? 3 : 0"
        v-bind="props"
        style="text-align: left"
        height="85px"
      >
        <v-container style="padding-top: 15px; display: flex">
          <div style="padding-left: 40px; width: calc(100% - 200px)">
            <v-row>
              <v-card-title style="width: calc(100% - 100px)">
                {{ downloadInfo.torrentName }}
              </v-card-title>
            </v-row>
            <v-row style="flex-direction: row-reverse">
              <v-card-subtitle style="margin-right: 20px">
                {{ fileSizeStr }}
              </v-card-subtitle>
              <v-card-subtitle v-show="isDownloading">
                {{ estTimeStr }}
              </v-card-subtitle>
              <v-card-subtitle style="width: 70px" v-show="isDownloading">
                {{ downloadRateStr }}
              </v-card-subtitle>
              <v-card-subtitle
                :style="{
                  color: isDownloading ? 'blue' : 'black',
                  marginLeft: isDownloading ? '40px' : '180px',
                }"
              >
                {{ downloadText }}
              </v-card-subtitle>
            </v-row>
            <v-row>
              <div style="width: calc(100% - 60px)">
                <v-progress-linear
                  v-show="!isFinished"
                  :model-value="progress"
                  color="rgb(86,150,204)"
                  style="margin-left: 40px"
                ></v-progress-linear>
              </div>
            </v-row>
          </div>
          <div
            style="
              margin-left: 10px;
              justify-content: center;
              display: flex;
              width: 150px;
            "
          >
            <v-btn
              v-show="isPaused"
              flat
              icon="mdi-download"
              @click="handleResume"
              style="margin-left: 30px"
            ></v-btn>
            <v-btn
              v-show="isDownloading"
              flat
              icon="mdi-pause"
              @click="handlePause"
              style="margin-left: 30px"
            ></v-btn>
            <v-btn
              v-show="false"
              flat
              icon="mdi-play"
              style="margin-left: 30px"
            ></v-btn>
            <v-btn
              @click="handleDelete"
              flat
              icon="mdi-delete"
              style="margin-left: 30px"
            ></v-btn>
          </div>
        </v-container>
      </v-card>
    </template>
  </v-hover>
</template>

<style scoped>
.v-application .v-card-title {
  font-size: 18px;
  padding: 0px;
  margin-left: 40px;
  margin-top: 5px;
  user-select: none;
}
.v-application .v-card-subtitle {
  font-size: 12px;
  padding: 0px;
  margin-left: 40px;
  user-select: none;
}

.v-application .v-btn {
  outline: none;
}
</style>
